<template>
  <div class="container">
    <el-card slot="header" class="box-card">
      <span style="font-size: 12px; color: pink"
        >说明：目前支持学科和关键字条件筛选</span
      >
      <el-button type="success" style="float: right" @click="getNew">
        <i class="el-icon-edit"></i>
        <span>新增试题</span>
      </el-button>
      <el-form
        :inline="true"
        class="demo-form-inline"
        style="margin-top: 30px"
        label-width="81px"
      >
        <el-form-item label="学科">
          <el-select
            placeholder="请选择"
            v-model="params.subjectID"
            @change="handler1"
          >
            <el-option
              v-for="item in subjectName"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select placeholder="请选择" v-model="params.catalogID">
            <el-option
              v-for="(item, index) in secondList"
              :key="index"
              :label="item.directoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select placeholder="请选择" v-model="params.tags">
            <el-option
              v-for="(item, index) in tagList"
              :key="index"
              :label="item.tagName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            placeholder="根据题干搜索"
            style="width: 220px"
            v-model="params.keyword"
          ></el-input>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select placeholder="请选择" v-model="params.questionType">
            <el-option
              v-for="item in questiontype"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select placeholder="请选择" v-model="params.difficulty">
            <el-option
              v-for="item in difficulty"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select placeholder="请选择" v-model="params.direction">
            <el-option
              v-for="(item, index) in direction"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select placeholder="请选择" v-model="params.creatorID">
            <el-option
              v-for="(item, index) in userList"
              :key="index"
              :label="item.username"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input style="width: 222px" v-model="params.remarks"></el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input style="width: 222px" v-model="params.shortName"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select
            placeholder="请选择"
            style="width: 105px"
            v-model="params.province"
            @change="area"
          >
            <el-option
              v-for="(item, index) in provincess"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
          <el-select
            style="margin-left: 10px; width: 105px"
            placeholder="请选择"
            v-model="params.city"
          >
            <el-option
              v-for="(item, index) in areas"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 159px">
          <el-button @click="claen">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 选项卡 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
      <!-- 消息提示框 -->
      <el-alert
        :title="'数据一共' + counts + '条'"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 15px"
      >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="120">
          <template #default="{ row }">{{ qtType(row.questionType) }}</template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="280">
          <template #default="{ row }">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
          <template #default="{ row }"> {{ timeRight(row.addDate) }} </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80">
          <template #default="{ row }">{{ nandu(row.difficulty) }}</template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="150">
          <template #default="{ row }">{{ cktype(row.chkState) }}</template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="120">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120">
        </el-table-column>
        <el-table-column label="发布状态" width="150">
          <template #default="{ row }"> {{ pubtype(row) }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="{ row }">
            <el-button @click="openDialog(row)" type="text" size="small"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="row.chkState !== 0"
              @click="check(row.id)"
              >审核</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="tonew(row.id)"
              :disabled="row.publishState === 1"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="onshow(row)">{{
              row.publishState == 1 ? "下架" : "上架"
            }}</el-button>
            <el-button
              type="text"
              size="small"
              @click="delDialog(row)"
              :disabled="row.publishState === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next,sizes,jumper"
        :total="this.counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="tableData.pages"
        :current-page="tableData.page"
      >
      </el-pagination>
    </el-card>
    <!-- 审核框 -->
    <el-dialog
      title="题目审核"
      :visible="dialogVisible1"
      width="30%"
      @close="close"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="0"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-radio-group v-model="ruleForm.radio">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input
            type="textarea"
            :rows="5"
            v-model="ruleForm.textarea"
            placeholder="请输入审核意见"
          ></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <span class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
          </span>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 预览框 -->
    <questions-preview
      :dialog-visible="dialogVisible"
      @closegb="closeDialog2"
      :questionType="questionType"
      :formData="formData"
    >
    </questions-preview>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
import { simple } from '@/api/hmmm/subjects.js'
import { list as sublist } from '@/api/hmmm/directorys.js'
import { list as taglist } from '@/api/hmmm/tags.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { list as userList } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { choice, detail, remove, choiceCheck, choicePublish } from '@/api/hmmm/questions.js'

export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      ruleForm: {
        cuId: null, // 暂存id
        radio: null, // 1:通过,2:拒绝
        textarea: '' // 审核意见
      },
      dialogVisible1: false, // 审核弹框打开
      dialogVisible: false, // 弹框打开
      questionType: null, // 预览内容的题型
      formData: {}, // 预览数据
      tableData: [], // 表格渲染
      counts: null,
      params: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        keyword: ''
      },
      subjectName: [], // 学科列表
      secondList: [], // 二级目录渲染
      tagList: [], // 标签列表
      questiontype: questionType, // 题型数组
      difficulty: difficulty, // 难度数组
      direction: direction, // 方向数组
      userList: [], // 录入人
      provincess: [], // 城市列表
      areas: [], // 区域列表
      activeName: 'first'
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 渲染
    async getList () {
      const res = await choice(this.params)
      this.tableData = res.data.items
      console.log(this.tableData)
      this.counts = res.data.counts
      const sbj = await simple()
      this.subjectName = sbj.data
      const users = await userList(this.params)
      this.userList = users.data.list
      this.provincess = provinces()
    },
    // 点击预览
    async openDialog (row) {
      this.dialogVisible = true
      const res = await detail(row)
      this.formData = res.data
      console.log(res.data)
    },
    // 关闭弹窗
    closeDialog2 () {
      this.dialogVisible = false
    },
    // 新增试题
    getNew () {
      this.$router.push({ path: 'new' })
    },
    // 二级目录
    async handler1 () {
      const sbjlist = await sublist({ subjectID: this.params.subjectID })
      const tag = await taglist({ subjectID: this.params.subjectID })
      // console.log(sbjlist)
      if (this.params.subjectID) {
        this.secondList = sbjlist.data.items
        this.tagList = tag.data.items
      }
    },
    // 城市
    area () {
      if (this.params.province + 1) {
        console.log(this.provincess)
        this.areas = citys(this.provincess[this.params.province])
      }
    },
    // 清空
    claen () {
      this.params = {}
      this.getList()
    },
    // 搜索
    async search () {
      const res = await choice(this.params)
      this.tableData = res.data.items
    },
    // 标签页
    handleClick (tab, event) {
      // console.log(tab, event)
      if (tab.name === 'second') {
        // 触发待审核事件
        this.second()
      } else if (tab.name === 'third') {
        // 触发已审核事件
        this.third()
      } else if (tab.name === 'fourth') {
        // 触发已拒绝事件
        this.fourth()
      } else {
        // 触发全部事件
        this.first()
      }
    },
    // tab选项卡
    async first () {
      const res = await choice(this.params)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },
    async second () {
      const res = await choice({ chkState: 0 })
      this.tableData = res.data.items
      this.counts = res.data.counts
    },
    async third () {
      const res = await choice({ chkState: 1 })
      this.tableData = res.data.items
      this.counts = res.data.counts
    },
    async fourth () {
      const res = await choice({ chkState: 2 })
      this.tableData = res.data.items
      this.counts = res.data.counts
    },
    // 题型
    qtType (value) {
      const map = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return map[value]
    },
    // 录入时间
    timeRight (value) {
      const res = dayjs(value).format('YYYY-MM-DD HH:mm:ss')
      return res
    },
    // 难度
    nandu (value) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[value]
    },
    cktype (value) {
      const map = {
        0: '待审核',
        1: '已审核',
        2: '已拒绝'
      }
      return map[value]
    },
    // 分页
    handleSizeChange (pagesize) {
      this.params.pagesize = pagesize
      this.params.page = 1
      this.getList()
    },
    handleCurrentChange (count) {
      this.params.page = count
      this.getList()
    },
    // 发布状态
    pubtype (value) {
      let thisvalue = ''
      console.log(value)
      if (value.chkState !== 1) {
        thisvalue = '待发布'
      } else {
        if (value.publishState === 1) {
          thisvalue = '已发布'
        } else {
          thisvalue = '已下架'
        }
      }
      return thisvalue
    },
    // 修改试题
    tonew (id) {
      this.$router.push({ path: 'new', query: { id: id } })
    },
    // 删除
    delDialog (row) {
      this.$confirm('你确认要删除么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(id)
        await remove(row)
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    check (id) {
      this.dialogVisible1 = true
      this.ruleForm.cuId = id
    },
    close () {
      this.ruleForm = {
        cuId: null, // 暂存id
        radio: null, // 1:通过,2:拒绝
        textarea: '' // 审核意见
      }
      this.dialogVisible1 = false
    },
    // 提交审核
    async confirm () {
      if (this.ruleForm.textarea === '') {
        this.$message({
          message: '请输入审核意见',
          type: 'warning'
        })
      } else {
        // console.log({ id: this.ruleForm.cuId, chkState: Number(this.ruleForm.radio), chkRemarks: this.ruleForm.textarea })
        await choiceCheck({ id: this.ruleForm.cuId, chkState: Number(this.ruleForm.radio), chkRemarks: this.ruleForm.textarea })
        // this.tableData.chkState = this.radio
        // this.cuId = null
        this.dialogVisible1 = false
        this.getList()
        this.$message({
          message: '审核完毕',
          type: 'success'
        })
      }
    },
    // 上架
    onshow (row) {
      if (row.publishState === 1) {
        this.$confirm('你确认要下架这条题目么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish({ id: row.id, publishState: 0 })
          this.getList()
          this.$message({
            type: 'success',
            message: '下架成功'
          })
        })
      } else {
        this.$confirm('你确认要上架这条题目么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish({ id: row.id, publishState: 1 })
          this.getList()
          this.$message({
            type: 'success',
            message: '上架成功'
          })
        })
      }
    }
  }
}
</script>

<style scoped lang='less'>
.item {
  margin-top: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  width: 100%;
  padding: 20px;
}

// .dialog-footer {
//   text-align: right;
// }
</style>
